<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
<title>家族圈管理</title>
	<link rel="stylesheet" href="${ctx}/static/css/datepicker.css" />
<link rel="stylesheet" href="${ctx}/static/css/jquery-ui.min.css" />
<script src="${ctx}/static/js/jquery-ui.min.js"></script>
   <style>
   		.checkModal{width:400px;}
   		#select{display:inline-block;}
		#ok{margin:0 auto;margin-left:40%;}
		.hr{width:90%;margin:0 auto;height:2px;background:#ccc;}

		.myconts{width:90%;height:auto;margin:10px auto;}
		.myconts-list{width:100%;height:150px;overflow-y:auto;}
		.myconts-list h6{margin:0;line-height:30px;}
		.myconts-list p{margin:0;font-size:12px;line-height:30px;}
		.myconts-list ul{width:100%;height:auto;margin:0;padding:0;}
		.myconts-list ul li{font-size:12px;}
		.myconts-list ul li span{line-height:22px;margin-right:10px;}
		.conts-list{margin-left:10px;}
   </style>
<script>
	$(function() {
		$('.popover-hide').popover('hide');
	});
</script>
<% 
    request.setAttribute("vEnter", "\n");   
%>
</head>
<body>

	<div class="main-content-inner">

		<div class="breadcrumbs" id="breadcrumbs">

			<script type="text/javascript">
				try {
					ace.settings.check('breadcrumbs', 'fixed')
				} catch (e) {
				}
			</script>

			<ul class="breadcrumb">
				<li><i class="ace-icon fa fa-home home-icon"></i> <a
					href="${ctx}/welcome">主页</a></li>
				<li class="active">聊天</li>
			</ul>
			<div>
				<form class="form-search" action="${ctx}/feed/list" method="GET">
					<div class="breadcrumbs" id="breadcrumbs"
						style="border-bottom: 0px;">
						<div class="nav-search">
							<span class="input-icon"> <span
								class="input-daterange input-group"> 发帖时间： </span>
							</span> <span class="input-icon"> <span
								class="input-daterange input-group"> <input type="text"
									style="width: 100px;" id="datetimeStart"
									class="input-sm form-control" name="search_GTE_createDate"
									value="${param.search_GTE_createDate}"> <span
									class="input-group-addon"> <i class="fa fa-exchange"></i>
								</span> <input type="text" style="width: 100px;" id="datetimeEnd"
									class="input-sm form-control" name="search_LTE_createDate"
									value="${param.search_LTE_createDate}">
							</span>
							</span> 
							<span class="input-icon">
								<span class="input-group">
									<select class="nav-search-input" name="search_EQ_feedTag.id"
									data-placeholder="帖子类型">
										<option value="" selected="selected">贴子类型</option>
										<c:forEach items="${feedtags}" var="feedtag">
												<option value="${feedtag.id}" <c:if test="${param['search_EQ_feedTag.id'] eq feedtag.id }">selected="selected"</c:if> >${feedtag.name}</option>
										</c:forEach>
									</select>
								</span>
							</span>
							 <span class="input-icon"> 
							 	<span class="input-group">
									<select class="nav-search-input" name="search_EQ_deltag"
									data-placeholder="状态">
										<option value="" selected="selected">状态</option>
										<option value="0"
											<c:if test="${param.search_EQ_deltag eq '0' }">selected="selected"</c:if>>可用</option>
										<option value="1"
											<c:if test="${param.search_EQ_deltag eq '1' }">selected="selected"</c:if>>不可用</option>
								</select>
								</span>
							</span>
							<span class="input-icon"> 
							 	<span class="input-group">
									<select class="nav-search-input" name="search_EQ_reportCount"
									data-placeholder="状态">
										<option value="" selected="selected">举报类型</option>
										<option value="0"
											<c:if test="${param.search_EQ_reportCount eq '0' }">selected="selected"</c:if>>无举报</option>
										<option value="1"
											<c:if test="${param.search_EQ_reportCount eq '1' }">selected="selected"</c:if>>有举报</option>
								</select>
								</span>
							</span>

						</div>
					</div>

					<div class="breadcrumbs">
						<div class="nav-search" id="nav-search"
							style="position: relative; left: 22px;">
							
							<span class="input-icon">
								<span class="input-group">
									评论数 ：
								</span>
							</span>
							<span class="input-icon">
								<span class="input-group">
									<input type="text" id="gtcomment" autocomplete="off" name="search_GTE_commentCount" placeholder="评论数" class="nav-search-input" id="nav-search-input" autocomplete="off" value="${param.search_GTE_commentCount}" />
									—
									<input type="text" id="ltcomment" autocomplete="off" name="search_LTE_commentCount" placeholder="评论数" class="nav-search-input" id="nav-search-input" autocomplete="off" value="${param.search_LTE_commentCount}" />									
								</span>	
							</span>	
							
							<span class="input-icon">
								<span class="input-group">
									点赞数 ：
								</span>
							</span>
							<span class="input-icon">
								<span class="input-group">
									<input type="text" id="gtlikecount" autocomplete="off" name="search_GTE_likeCount" placeholder="点赞数" class="nav-search-input" id="nav-search-input" autocomplete="off" value="${param.search_GTE_likeCount}" />
									—
									<input type="text" id="ltlikecount" autocomplete="off" name="search_LTE_likeCount" placeholder="点赞数" class="nav-search-input" id="nav-search-input" autocomplete="off" value="${param.search_LTE_likeCount}" />									
								</span>	
							</span>	
							<span class="input-icon"> <span class="input-group">
									<input type="text" autocomplete="off"
									name="search_LIKE_userId"
									placeholder="发帖用户 ..." class="nav-search-input"
									id="nav-search-input" autocomplete="off"
									value="${param['search_LIKE_userId']}" />
							</span>
							</span>
							<span class="input-icon"> <span class="input-group">
									<input type="button" value="搜索"
									onclick="commitForm();" />
							</span>
							</span>
						</div>
					</div>
				</form>
			</div>
		</div>

		<div class="page-content">

			<c:if test="${not empty message}">
				<div id="message" class="alert alert-success">
					<button data-dismiss="alert" class="close">×</button>${message}</div>
			</c:if>

			<div class="page-header">
				<h1>
					聊天 <small> <i class="ace-icon fa fa-angle-double-right"></i>
						列表
					</small>
				</h1>
			</div>

			<div class="row">
				<div class="col-xs-12">

					<table id="sample-table-1"
						class="table table-striped table-bordered table-hover">
						<thead>
							<tr>
								<th class="center"><label class="position-relative">
										<input type="checkbox" id="id-toggle-all" class="ace" /> <span
										class="lbl"></span>
								</label></th>
								<th>发帖用户</th>
								<th>标签</th>
								<th>发布内容</th>
								<th>图片数量</th>
								<th>评论数</th>
								<th>点赞数</th>
								<th>用户举报</th>
								<th>定位</th>
								<th>状态</th>
								<th>是否顶置</th>
								<th>发帖时间</th>
								<th>管理</th>
							</tr>
						</thead>

						<tbody>
							<c:forEach items="${feeds.content}" var="feed">
								<tr>
									<td class="center"><label class="position-relative">
											<input type="checkbox" class="ace" /> <span class="lbl"></span>
									</label></td>

									<td>${feed.userId}</td>
									<td>${feed.feedTag.name}</td>
									<td>
										<c:choose>
											<c:when test="${fn:length(feed.content)>20 }">
												<input type="hidden" value="${feed.content }"/>
												<a href="#" onclick="showDetail(this);"><c:out value="${fn:substring(feed.content,0,20)}......"></c:out></a>
											</c:when>
											<c:otherwise>
												${feed.content}
											</c:otherwise>
										</c:choose>
									</td>
									<td><c:choose>
											<c:when test="${empty feed.pics}">
												<c:out value="0" />
											</c:when>
											<c:otherwise>
												<c:out value="${fn:length(fn:split(feed.pics,'|')) }" />
											</c:otherwise>
										</c:choose></td>
									<td>${feed.commentCount}</td>
									<td>${feed.likeCount}</td>
									<td>${feed.reportCount}</td>
									<td>${feed.cityName}</td>
									<td><c:if test="${feed.deltag eq '0'}">可用</c:if> <c:if
											test="${feed.deltag eq '1'}">不可用</c:if></td>
									<td><c:if test="${feed.isTop eq true}">顶置</c:if> <c:if
											test="${feed.isTop eq false}">正常</c:if></td>
									<td><fmt:formatDate value="${feed.createDate}"
											pattern="yyyy-MM-dd HH:mm:ss" /></td>
									<td>
									<shiro:hasPermission name="business:feed:get">								
										<a class="btn btn-xs btn-info"
											href="${ctx}/feed/getDetailFeed/${feed.id}"> 查看</a> 
									</shiro:hasPermission>
									<shiro:hasPermission name="business:feed:delete">
										<c:if test="${feed.deltag eq '0' }">									
											<a class="btn  btn-xs btn-info"	onclick="checkDelete(${feed.id})">删除</a>
										</c:if>
									</shiro:hasPermission>
									<c:if test="${feed.isTop eq true && feed.deltag eq '0'}">
										<a class="btn  btn-xs btn-info"	onclick="setTop(${feed.id}, false)">取消顶置</a>
									</c:if>
									<c:if test="${feed.isTop eq false && feed.deltag eq '0'}">
										<a class="btn  btn-xs btn-info"	onclick="setTop(${feed.id}, true)">顶置</a>
									</c:if>
								</tr>
							</c:forEach>
						</tbody>
					</table>

				</div>
			</div>
	        <div id="dialog-delete" class="hide">
	             <div class="form-group">
	                 <div class="col-sm-9">
	                 	<label>请填写原因</label>
	                 </div>
	                 <div class="col-sm-9">
	                 	<textarea id="tt_reason" rows="7" cols="60"></textarea>
	                 </div>
	             </div>
	             <p>
	             </p>
	         </div>
			<tags:pagination page="${feeds}" paginationSize="5" />
			<shiro:hasPermission name="business:feed:create">
			<div style="clear: right">
				<a class="btn btn-info" href="${ctx}/feed/create">发布帖子</a>
			</div>
			</shiro:hasPermission>
		</div>
		<!-- /.page-content -->
		<div class="modal fade" id="detailModal" tabindex="-1" role="dialog" 
		   aria-labelledby="detailModalLabel" aria-hidden="true">
		   <div class="modal-dialog">
		      <div class="modal-content">
		         <div class="modal-header">
		            <button type="button" class="close" 
		               data-dismiss="modal" aria-hidden="true">
		                  &times;
		            </button>
		            <h4 class="modal-title" id="myModalLabel">
		               	发帖内容
		            </h4>
		         </div>
		         <div class="modal-body">
		           	<textarea id="detailname" style="width:570px;height:110px;resize:none;" readonly ></textarea>
		         </div>
		         <div class="modal-footer">
		            <button type="button" class="btn btn-default" 
		               data-dismiss="modal">关闭
		            </button>
		         </div>
		      </div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>
	</div>
		<script src="${ctx}/static/js/date-time/bootstrap-datepicker.js"></script>
	<script type="text/javascript">
		$('.input-daterange').datepicker({
			format:'yyyy-mm-dd',
			autoclose:true
		});
		
		/**日期的开始***/
		//日期时间选择器
			$("#datetimeStart").datepicker({
			    format: "yyyy-mm-dd",
			    autoclose: true,
			    minView: "month",
			    maxView: "decade",
			    todayBtn: true,
			    pickerPosition: "bottom-left"
			}).on("click",function(ev){
			    $("#datetimeStart").datepicker("setEndDate", $("#datetimeEnd").val());
			});
			$("#datetimeEnd").datepicker({
			    format: "yyyy-mm-dd",
			    autoclose: true,
			    minView: "month",
			    maxView: "decade",
			    todayBtn: true,
			    pickerPosition: "bottom-left"
			}).on("click", function (ev) {
			    $("#datetimeEnd").datepicker("setStartDate", $("#datetimeStart").val());
			});
			
			function commitForm(){
				if($("#gtcomment").val()!='' && isNaN($("#gtcomment").val())){
					alert("评论数必须为数字");
					return false;
				}
				if($("#gtcomment").val()!='' && isNaN($("#gtcomment").val())){
					alert("评论数必须为数字");
					return false;
				}
				if($("#gtlikecount").val()!='' && isNaN($("#gtlikecount").val())){
					alert("点赞数必须为数字");
					return false;
				}
				if($("#ltlikecount").val()!='' && isNaN($("#ltlikecount").val())){
					alert("点赞数必须为数字");
					return false;
				}
				$('.form-search').submit();
			}
			
			function checkDelete(feedId){
				$("#tt_reason").val("");
				var dialog = $("#dialog-delete").removeClass('hide').dialog({
	 	              modal: true,
	 	              height: 350,width:500 ,
	 	              title: "删除信息",
	 	              title_html: true,
	 	              buttons: [
							{
							    text: "删除",
							    "class": "btn btn-primary btn-xs",
							    click: function () {
							  	 var tempThis = $(this);
							  	//判断不为空且小于50个汉字
							  	if($("#tt_reason").val().length > 0 && $("#tt_reason").val().length < 200) {
							  		$.ajax({
							  			type:'POST',
							  			url:'${ctx}/feed/deletefeed/',
							  			dataType:"json", 
							  			data:{
							            	 'id':feedId ,     
							        		 'reason':$("#tt_reason").val() },
							  			success:function(data) {
							  				alert(data.resMsg);
							  				if(data.resCode == 1) {
							  					tempThis.dialog("close");
							  					window.location.reload();
							  				}
							  			}
							    		});
							  	} else {
							  		alert("原因不能为空且需要小于200汉字");
							  	} 
							    }
							},
	 	                  {
	 	                      text: "取消",
	 	                      "class": "btn btn-xs",
	 	                      click: function () {
	 	                          $(this).dialog("close");
	 	                      }
	 	                  }
	 	              ]
	 	          });
			}
			
			function showDetail(name){
				var content=name.previousElementSibling.value;
				document.getElementById("detailname").innerHTML="";
				document.getElementById("detailname").innerHTML=content;
				$('#detailModal').modal('show'); 
			}
			
			function setTop(id, top) {
		 		$.ajax({
		 			type:'POST',
		 			url:'${ctx}/feed/setTop/',
		 			data:{'id':id,
		 				  'top':top},
		 			success:function(data) {
		 				if(data.resCode == 90001) {
		 					alert(data.resMsg);
		 					window.location.reload();
		 	        	} else {
		 	        		alert(data.resMsg);
		 	        	}
		 		     },
		 		     error: function(XMLHttpRequest, textStatus, errorThrown) {
		 		    	errorGetTruckSetEmpty();
	 	        		alert("连接异常请重试");
		 		    	  }
		 		     
		 			});
		     } 
	</script>
</body>
</html>
